<template>
	<div class="indexlayout-main-conent">
		<el-card shadow="never" class="cus-card">
			<template #header>
				<el-row>
					<el-col :span="8">
						<el-button type="primary" @click="() => setCreateFormVisible(true)">添加模块</el-button>
					</el-col>

				</el-row>
			</template>

			<el-table :data="list" style="width: 100%; margin-bottom: 20px" row-key="id" border >
				<el-table-column prop="name" label="模块名称" sortable />
				<el-table-column prop="icon" label="图标" width="80" />
				<el-table-column prop="path" label="路径" sortable width="100" />
				<el-table-column prop="title" label="标题" sortable width="100" />
				<el-table-column prop="component" label="组件" sortable />
				<el-table-column label="操作" prop="action" width="135">
					<template #default="{row}">
						<el-button-group class="ml-4">
							<el-tooltip content="编辑">
								<el-button type="primary" icon="Edit" size="small"
									@click="detailUpdateData(row)" />
							</el-tooltip>
							<el-tooltip content="权限">
								<el-button type="success" icon="CopyDocument" size="small"
									@click="Permission(row.id)" />
							</el-tooltip>
							<el-tooltip content="删除">
								<el-button type="danger" icon="Delete" @click="deleteTableData(row.id)"
									size="small" />
							</el-tooltip>
						</el-button-group>
					
					</template>
				</el-table-column>
			</el-table>

			<create-form :visible="createFormVisible" :onCancel="() => setCreateFormVisible(false)"
				:onSubmitLoading="createSubmitLoading" :onSubmit="createSubmit" :list="treeData(list)" />

			<update-form v-if="updateFormVisible===true" :visible="updateFormVisible" :values="updateData"
				:list="treeData(list)" :onCancel="() => updataFormCancel()" :onSubmitLoading="updateSubmitLoading"
				:onSubmit="updateSubmit" />
			<PermissionModelForm :visible="permissionVisible" :onCancel="()=>permissionVisible=false"
				:onSubmit="permissionSubmit" :ModuleId="moduleId"></PermissionModelForm>

		</el-card>
	</div>
</template>
<script lang="ts">
	import {
		computed,
		ComputedRef,
		defineComponent,
		onMounted,
		Ref,
		ref
	} from "vue";
	import {
		useStore
	} from "vuex";
	import {
		ElMessageBox,
		ElMessage
	} from "element-plus";
	import IconSvg from "@/components/IconSvg";
	import CreateForm from './components/CreateForm.vue';
	import UpdateForm from './components/UpdateForm.vue';
	import PermissionModelForm from './components/PermissionModelForm.vue'
	import {
		StateType as ListStateType
	} from "./store";
	import {
		TableListItem
	} from './data.d';

	interface ListTablePageSetupData {
		list : ComputedRef<TableListItem[]>;
		loading : Ref<boolean>;
		getList : (current : number) => Promise<void>;
		createFormVisible : Ref<boolean>;
		setCreateFormVisible : (val : boolean) => void;
		createSubmitLoading : Ref<boolean>;
		createSubmit : (values : Omit<TableListItem, 'id'>, resetFields : () => void) => Promise<void>;
		detailUpdateLoading : Ref<number[]>;
		detailUpdateData : (row : TableListItem) => Promise<void>;
		updateData : ComputedRef<Partial<TableListItem>>;
		updateFormVisible : Ref<boolean>;
		updataFormCancel : () => void;
		updateSubmitLoading : Ref<boolean>;
		updateSubmit : (values : TableListItem, resetFields : () => void) => Promise<void>;
		deleteLoading : Ref<number[]>;
		deleteTableData : (id : number) => void;
		tabVal : Ref<string>;
		searchVal : Ref<string>;
	}

	export default defineComponent({
		name: 'ListTablePage',
		components: {
			IconSvg,
			CreateForm,
			UpdateForm,
			PermissionModelForm
		},

		setup() : ListTablePageSetupData {

			const store = useStore<{
				ModuleTable : ListStateType
			}>();

			// 列表数据
			const list = computed<TableListItem[]>(() => store.state.ModuleTable.tableData.list);
			const treeItem = (routesData : RoutesDataItem[]) : RoutesDataItem => {
				let data = []
				for (let index = 0, len = routesData.length; index < len; index += 1) {
					const element = routesData[index];
					let item : RoutesDataItem = { label: '', value: '', children: [] };
					item.label = element.name
					item.value = element.id

					if (element.children) {
						item.children = treeItem(element.children);

					}

					data.push(item)
				}

				return data;
			};
			const treeData = (routesData : RoutesDataItem[]) : RoutesDataItem => {
				return [{ label: '顶级', value: 0, children: treeItem(routesData) }]
			}

			// 获取数据
			const loading = ref<boolean>(true);
			const getList = async () : Promise<void> => {
				loading.value = true;
				await store.dispatch('ModuleTable/queryTableData', {});
				loading.value = false;
			}


			// 新增弹框 - visible
			const createFormVisible = ref<boolean>(false);
			const setCreateFormVisible = (val : boolean) => {
				createFormVisible.value = val;
			};
			// 新增弹框 - 提交 loading
			const createSubmitLoading = ref<boolean>(false);
			// 新增弹框 - 提交
			const createSubmit = async (values : Omit<TableListItem, 'id'>, resetFields : () => void) => {
				createSubmitLoading.value = true;
				const res : boolean = await store.dispatch('ModuleTable/createTableData', values);
				if (res === true) {
					resetFields();
					setCreateFormVisible(false);
					ElMessage.success('新增成功！');
					getList();
				}
				createSubmitLoading.value = false;
			}


			// 编辑弹框 - visible
			const updateFormVisible = ref<boolean>(false);
			const setUpdateFormVisible = (val : boolean) => {
				updateFormVisible.value = val;
			}
			const updataFormCancel = () => {
				setUpdateFormVisible(false);
			}
			// 编辑弹框 - 提交 loading
			const updateSubmitLoading = ref<boolean>(false);
			// 编辑弹框 - 提交
			const updateSubmit = async (values : TableListItem, resetFields : () => void) => {
				updateSubmitLoading.value = true;
				const res : boolean = await store.dispatch('ModuleTable/updateTableData', values);
				if (res === true) {
					updataFormCancel();
					ElMessage.success('编辑成功！');
					getList();
				}
				updateSubmitLoading.value = false;
			}

			// 编辑弹框 data
			let updateData = ref<TableListItem>();
			const detailUpdateLoading = ref<number[]>([]);
			const detailUpdateData = async (row : TableListItem) => {
				updateData.value = await store.dispatch("ModuleTable/detailTableData", row.id)
				setUpdateFormVisible(true);

			}


			// 删除 loading
			const deleteLoading = ref<number[]>([]);
			// 删除
			const deleteTableData = (id : number) => {

				ElMessageBox.confirm('确定删除吗？', '删除', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(async () => {
					deleteLoading.value = [id];
					const res : boolean = await store.dispatch('ModuleTable/deleteTableData',
						id);
					if (res === true) {
						ElMessage.success('删除成功！');
						getList();
					}
					deleteLoading.value = [];
				}).catch((error : any) => {
					console.log(error)
				});

			}

			const tabVal = ref<string>('all');
			const searchVal = ref<string>('');


			const permissionVisible = ref(false)
			const moduleId = ref(0)
			const Permission = (id) => {
				moduleId.value = id
				permissionVisible.value = true
			}
			const permissionSubmit = () => {
				console.log('sucess')
				permissionVisible.value = false

			}
			onMounted(() => {
				getList();
			})

			return {
				list,
				treeData,
				loading,
				getList,
				createFormVisible,
				setCreateFormVisible,
				createSubmitLoading,
				createSubmit,
				detailUpdateLoading,
				detailUpdateData,
				updateData,
				updateFormVisible,
				updataFormCancel,
				updateSubmitLoading,
				updateSubmit,
				deleteLoading,
				deleteTableData,
				tabVal,
				searchVal,
				permissionVisible,
				permissionSubmit,
				Permission,
				moduleId
			}

		}
	})
</script>